<template>
	<div id="item-container">
		<!-- 搜索栏 -->
		<div class="floating-search">
			<div class="search-bar">
				<el-form :inline="true" :model="searchData" class="search-form">
					<el-form-item label="物品名">
						<el-input placeholder="请输入物品名" v-model="searchData.name" clearable />
					</el-form-item>
					<el-form-item label="种类">
						<el-select v-model="searchData.type" clearable placeholder="选择种类">
							<el-option v-for="t of itemTypes" :key="t.id" :label="t.name" :value="t.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="堆叠数量">
						<el-select v-model="searchData.size" clearable placeholder="选择堆叠">
							<el-option v-for="size of itemSizes" :key="size" :value="size" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSearch">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<!-- 物品列表 -->
		<div class="item-grid">
			<template v-if="searchList.length > 0">
				<div v-for="item in searchList" :key="item.id" class="item-card" @click="handleOpenInfo(item)">
					<ImageVue :icon="item.iconUrl" type="items" :size="64" class="item-image" />
					<div class="item-name">{{ item.name }}</div>
				</div>
			</template>
			<div v-else class="empty-state">暂无物品</div>
		</div>
	</div>
</template>

<script>
	import ImageVue from "@/components/Image.vue";

	export default {
		name: "Item",
		components: {
			ImageVue
		},
		data() {
			return {
				itemTypes: [],
				itemSizes: [],
				searchData: {
					name: null,
					type: null,
					size: null
				},
				searchList: [],
			};
		},
		methods: {
			handleSearch() {
				this.$api.post("/item/client/list", this.searchData).then((res) => {
					this.searchList = res.data.list;
				});
			},
			handleOpenInfo(item) {
				this.$router.push({
					path: "/item/info",
					query: {
						id: item.id
					}
				});
			},
			init() {
				this.$api.get("/item/init").then((res) => {
					this.itemSizes = res.data.sizes;
					this.itemTypes = res.data.types;
				});
				this.searchData = {
					name: null,
					type: null,
					size: null
				};
				this.handleSearch();
			},
		},
		created() {
			this.$version.addListener("Item", this.init);
			this.init();
			document.addEventListener("keydown", (e) => {
				if (e.key === "Enter") this.handleSearch();
			});
		},
		destroyed() {
			this.$version.removeListener("Item");
			document.removeEventListener("keydown", null);
		},
	};
</script>

<style lang="less" scoped>
	#item-container {
		background: #f5f6fa; // 整体背景设为浅灰色
		height: 100%;

		/* -------------------- 悬浮搜索栏 -------------------- */
		.floating-search {
			background: rgba(255, 255, 255, 0.98); // 半透明白色背景
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
			border-bottom: 1px solid #ebeef5;
			// height: 80px; // 根据实际高度调整

			.search-bar {
				max-width: 1200px;
				margin: 0 auto;
				padding: 12px 24px;

				.search-form {
					display: flex;
					justify-content: flex-end; // 右对齐
					gap: 16px;

					/deep/ .el-form-item {
						margin-bottom: 0;

						&:last-child {
							margin-right: 0; // 移除最后一个表单项的右边距
						}
					}

					// 移动端适配
					@media (max-width: 768px) {
						flex-wrap: wrap;
						justify-content: flex-start;

						.el-form-item {
							margin-right: 8px;

							&:last-child {
								margin-left: auto; // 让查询按钮右对齐
							}
						}
					}
				}
			}
		}

		/* -------------------- 网格布局样式 -------------------- */
		.item-grid {
			max-height: calc(100% - 80px);
			display: grid;
			overflow-x: auto;
			grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			gap: 20px;
			padding: 0 8px;

			.item-card {
				background: white;
				border-radius: 12px;
				padding: 16px;
				text-align: center;
				cursor: pointer;
				transition: transform 0.2s, box-shadow 0.2s;
				border: 1px solid #ebeef5; // 浅色边框

				&:hover {
					transform: translateY(-4px);
					box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); // 悬停阴影
				}

				.item-image {
					margin: 0 auto;
					border-radius: 8px;
					background: #f8f9fa; // 图片背景色
				}

				.item-name {
					margin-top: 12px;
					font-size: 14px;
					color: #303133; // 主文字颜色
					font-weight: 500;
					line-height: 1.4;
				}
			}

			.empty-state {
				text-align: center;
				color: #909399;
				grid-column: 1 / -1;
				padding: 40px 0;
			}
		}

		/* -------------------- 响应式适配 -------------------- */
		@media (max-width: 768px) {
			.item-grid {
				grid-template-columns: repeat(2, 1fr); // 移动端两列
			}

			.search-form {
				flex-wrap: wrap;
			}
		}

		/* 滚动条样式 */
		::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 4px;
		}
	}
</style>